<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";
import {findUsers} from "@/api/chat"
import {
	SearchOutlined,
	FileExcelOutlined
} from '@ant-design/icons-vue';
import Window from "@/components/window.vue"
const props = defineProps(['records'])
const emits = defineEmits(['select',"addRecords"])
const isAction=ref("")
function select(value){
	isAction.value=value
	emits("select",value)
}
const findInput=ref("")
const findRes=reactive({
	value:[],
	findText:"",
	nextValue:[]

})
function find(){
	const value=findInput.value
	if(value){
		if(value===findRes.findText){
			isShow.value=true
			findRes.value=findRes.nextValue
		}else{
			findUsers(value).then(res=>{
				const data=res.data
				if(res.code===0){
					findRes.value=data
					findRes.findText=value
					findRes.nextValue=findRes.value
					
					isShow.value=true
				}
			})
		}
	}
}

const isShow=ref(false)
function close(){
	isShow.value=false
	findRes.value=[]
}
function addRecords(uid){
	emits("addRecords",{uid,info:[]})
}
</script>


<template>
<div class="linkMan">
	<div v-if="props?.records?.length===0" class="noRecords">
		<file-excel-outlined />无聊天记录
	</div>
	<div v-else class="boxList">
		<div class="box" :class="{isAction:isAction==item}" v-for="item in props.records" @dblclick="select(item)">
			<div class="left">
				<div class="unread" v-show="!item?.info?.some(i=>i.state===0)"></div>
				<div v-if="!img">头像</div>
				<img v-else src="" alt="头像">
			</div>
			<div class="right">
				<div class="uid">
					{{item.uid}}
				</div>
				<div class="message">
					{{item?.info[item?.info?.length-1]?.message}}
				</div>
			</div>
		</div>
	</div>
	<div class="find">
		<div class="inputFlex">
			<input type="text" v-model="findInput" placeholder="搜索用户">
			<div class="ss" @click="find"><search-outlined/></div>
		</div>
	</div>
</div>

<Window :isShow="isShow" @close="close">
	<div>
		<div v-show="findRes.value.length===0" class="noUsers">
			未查询到用户
		</div>
		<div v-show="findRes.value.length!==0">
			<div class="findList" v-for="item in findRes.value">
				<div class="findRew">
					<div>
						<div class="username">{{item.username}}</div>
						<div class="id">{{item.id}}</div>
					</div>
					<div class="button" @click="addRecords(item.id)">发起聊天</div>
				</div>
			</div>
		</div>
	</div>
</Window>
</template>


<style scoped>
.inputFlex{
	display: flex;
	flex-direction: row;
	align-items: center;
    justify-content: space-between;
}
.ss{
	font-size: 12px;
	color: rgb(0, 136, 255);
	width: 2rem;
	text-align: center;
	cursor: pointer;
}
.ss:hover{
	background-color: rgb(0, 136, 255);
	color: #fff;
}
.linkMan{
	width: 15rem;
	height: 100%;
	overflow: auto;
	background-color: rgb(188, 188, 188);
	padding: 10px;
}
.linkMan::-webkit-scrollbar,.boxList::-webkit-scrollbar{/*整个滚动条  https://m.php.cn/article/480425.html*/
    width: 0;
}
.boxList{
	height: calc( 100% - 2rem );
	overflow: auto;
}
.box{
	display: flex;
	flex-direction: row;
	height: 4rem;
	border: 1px solid rgb(251, 209, 0);
	border-radius: 10px;
	margin-bottom: 10px;
	align-items: center;
	padding:0 10px;
	background-color: #fff;
}
.left{
	position: relative;
	width: calc( 2rem + 10px);
	background-color: #fff;
	border:1px solid rgb(227, 227, 227);
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	color: rgb(64, 64, 64);
	font-size: 12px;
	text-align: center;
	line-height: 1.8rem;
}
.right{
	width: calc( 100% - (2rem + 10px) );
	height: 3rem;
	overflow: hidden;
	margin-left: 10px;
}
.uid{
	font-size: 14px;
	font-weight: bold;
	color: rgb(0, 0, 0);
}
.message{
	text-overflow: ellipsis;
    overflow: hidden;
	font-size: 12px;
	color: rgb(132, 132, 132);
}
.unread{
	position: absolute;
	right: 0;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background-color: red;
}
.isAction{
	background-color: rgb(40 40 40);
}
.isAction .right .uid,.isAction .right .message{
	color: #fff;
}
.noRecords{
	color:rgb(109 109 109);
}
.find{
	height: 2rem;
	line-height: 2rem;
	background-color: #fff;
	padding-left: 10px;
}
.find:focus-within{
	box-shadow: 0 0 8px 0px #000000;
}
.find input{
	border: 0;
	outline: 0;
	width: calc( 100% - 2.5rem );
	height: 100%;
	overflow: hidden;
	font-size: 12px;
}

.findList{

}
.findRew{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.445);
}
.username{
	font-size: 12px;
	text-decoration: underline;
	font-weight: bold;
}
.button{
	border: 1px solid #000;
	height: 2em;
	line-height: 2em;
	font-size: 12px;
	padding: 0 5px;
	border-radius: 2em;
	cursor: pointer;
}
.id{
	color: rgb(123, 123, 123);
	font-size: 12px;
}
.noUsers{
	color: #666;
	font-size: 12px;

}
</style>